<template>
  <Box type="long" style="margin-top: 40px">
    <div class="section">
      <div class="liveReport"><BaseEcharts :options="options"></BaseEcharts></div>
    </div>
  </Box>
</template>

<script setup lang="ts">
import Box from '@/components/Box.vue'
import BaseEcharts from '@/components/BaseEcharts.vue'
import { ref } from 'vue'
import { getProjectContract } from '@/api'
import useInterval from '@/hooks/useInterval'
import config from '@/utils/config'

const options: any = ref({
  grid: {
    top: '12%',
    left: '8%',
    right: '3%',
    bottom: '6%',
    containLabel: true,
    backgroundColor: '#bfced9', // 浅灰色背景
    // 设置网格线的颜色
    borderWidth: 1,
    borderColor: '#bfced9'
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
    data: ['9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点'],
    nameTextStyle: { color: '#fff' },
    axisLabel: {
      fontSize: 18,
      color: '#fff'
    }
  },
  yAxis: {
    name: '设备总数(台)',
    type: 'value',
    nameTextStyle: {
      color: '#fff',
      align: 'right',
      padding: [0, 40, 14, 4],
      // verticalAlign: 'left',
      fontSize: 18
    },
    axisLabel: {
      color: '#fff',
      fontSize: 18
    },
    splitLine: { lineStyle: { color: ['#bfced9'] } }
  },
  series: [
    {
      data: [],
      type: 'bar',
      barCategoryGap: '50%', // 同一类目内柱子之间的间距
      barGap: '30%',
      color: '#45a0e3'
    }
  ]
})

useInterval(() => {
  getProjectContract({}).then((res: any) => {
    options.value = {
      grid: {
        top: '12%',
        left: '8%',
        right: '3%',
        bottom: '6%',
        containLabel: true,
        backgroundColor: '#bfced9', // 浅灰色背景
        // 设置网格线的颜色
        borderWidth: 1,
        borderColor: '#bfced9'
      },
      xAxis: {
        type: 'category',
        data: res.axisX.map((v: any) => v.title),
        nameTextStyle: { color: '#fff' },
        axisLabel: {
          fontSize: 16,
          color: '#fff',
          interval: 0
        }
      },
      yAxis: {
        interval: res.axisY[1] ? res.axisY[1] - res.axisY[0] : 1,
        min: res.axisY[0],
        max: res.axisY[res.axisY.length - 1],
        name: '设备总数(台)',
        type: 'value',
        nameTextStyle: {
          color: '#fff',
          align: 'right',
          padding: [0, -8, -8, 0],
          // verticalAlign: 'left',
          fontSize: 16
        },
        axisLabel: {
          color: '#fff',
          fontSize: 16
        },
        splitLine: { lineStyle: { color: ['#bfced9'] } }
      },
      series: [
        {
          data: res.axisX.map((v: any) => v.value),
          type: 'bar',
          // barWidth: '50%',
          // barCategoryGap: '10%', // 同一类目内柱子之间的间距
          // barGap: '10%',
          color: '#45a0e3'
        }
      ]
    }
  })
}, config.internalTime)
</script>

<style lang="scss" scoped>
.section {
  background-color: rgba(#142c55, 0.5);
}
.liveReport {
  margin-top: 10px;
  width: 100%;
  height: 244px;
}
</style>
